<template>
  <div>
    <Row :gutter="16" class="wrapper">
      <i-col span="12">
        <div class="write" @click="write">
          <span class="text" style="padding-top: 145px">
          手动填写
        </span>
        </div>

        <!--        <div  >
        &lt;!&ndash;          <img src="../../assets/img/书写.png" width="150"/>&ndash;&gt;
                </div>-->
      </i-col>
      <i-col span="12" class="upload">
        <span class="text">
          文件上传
        </span>

        <!--          <img src="../../assets/img/上传.png" width="150"/>-->
        <input type="file" name="file" class="upload__input" @change="uploadChange">

      </i-col>
    </Row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        /*文件*/
        mapData: '',
        file: '',
      }
    },
    methods: {
      write() {
        this.$emit('write', false);
      },
      uploadChange(event) {
        this.mapData = event.target.files[0];
        this.Post(this.$api.url + '/thesis/Integration', this.mapData)
      },
      Post(url, data) {
        let _this = this;
        let formData = new FormData();
        formData.append("file", data);
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$axios.post(url, formData, config).then(function (res) {
          if (res.status == 200) {

            _this.$emit('write', true);

            _this.$emit('returnTitle', res.data.title);
            _this.$emit('returnKeyword', res.data.keyword);
            _this.$emit('returnAbstract', res.data.abstract);
            _this.$emit('returnLiterature', res.data.references.join("\n"));
            _this.$emit('returnMainBody', res.data.body);

          }
        });
      }
    },
  }
</script>

<style scoped>
  .wrapper {
    text-align: center;
    margin: 20px 230px !important;
    background: #f3f3f3;
    padding: 25px 0;
  }

  .upload {
    padding: 10px;
    line-height: 20px;
    text-decoration: none;
  }

  .upload .upload__input {
    text-align: center;
    position: absolute;
    left: 34px;
    opacity: 0;
    width: 180px;
    height: 90%;
    cursor: pointer;
  }

  .write {
    height: 150px;
    background: url("../../assets/img/书写1.png") no-repeat;
    background-size: 76%;
    background-position: center;
    cursor: pointer;
  }

  .write:hover {
    height: 150px;
    background: url("../../assets/img/书写.png") no-repeat;
    background-size: 76%;
    background-position: center;
    cursor: pointer;
  }


  .upload {
    height: 150px;
    background: url("../../assets/img/上传1.png") no-repeat;
    background-size: 73%;
    background-position: center;
    cursor: pointer;
  }

  .upload:hover {
    height: 150px;
    background: url("../../assets/img/上传.png") no-repeat;
    background-size: 73%;
    background-position: center;
    cursor: pointer;
  }

  .text {
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    padding-top: 140px;
    width: 150px;
  }
</style>
